<template>
  <el-select v-model="data.value" clearable class="m-0"
             :multiple="multiple"
             :disabled="data.isdisabled" :placeholder="placeholder" size="small" @change="advancedSelect">
    <el-option v-for="item in options"
               :key="valueKey ? item[valueKey] : getId(item)"
               :label="lableKey ? item[lableKey] : getLabel(item)"
               :value="valueKey ? item[valueKey] : getId(item)">
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'

export default defineComponent({
  components: {},
  emits: {
    changeValue: null,
  },
  props: {
    options: {
      type: Object,
      required: true,
    },
    placeholder: {
      type: String,
    },
    selectValue: {
      type: String,
    },
    disabled:{
      type:Number
    },
    multiple: {
      type: Boolean,
      defalut: false,
    },
    lableKey: {
      type: String
    },
    valueKey: {
      type: String
    }
  },
  model: {
    prop: 'value',
    event: 'changes',
  },
  setup(props, { emit }) {
    const isDefaultValue = (value) => props.multiple ? (value ? value.split(',') : []) : value;
    const data = reactive({
      value: isDefaultValue(props.selectValue),
      isdisabled:props.disabled == 1,
    })
    // watch(
    //   () => props.selectValue,
    //   (newVal, oldVal) => {
    //     data.value =newVal
    //   }
    // )

    watch(props, (newValue, oldValue) => {
      data.value = isDefaultValue(newValue.selectValue)
    });

    // 监听数据发生变化
    let dataList: any = ref(props.options)
    watch(
      () => props.options,
      (newVal, oldVal) => {
        changeList(newVal)
      }
    )
    const changeList = (value) => {
      dataList.value = value
    }

    const advancedSelect = (value) => {
      let list = JSON.parse(JSON.stringify((dataList.value)));
      // console.log(list,value)
      if (props.multiple) {
        const filterList = list.filter(t => (value || []).includes(props.valueKey ? t[props.valueKey] : getId(t)));
        emit('changeValue', { itemValue: value.join(','), itemText: (filterList.map(t => props.lableKey ? t[props.lableKey] : getLabel(t)) || []).join(',') })
      } else if (props.valueKey) {
        const item = list.find(t => props.valueKey ? t[props.valueKey] === value : false) || {};
        emit('changeValue', item)
      } else {
        for (let key in list) {
          if (value == list[key].itemText || value == list[key].id) {
            emit('changeValue', list[key])
            return
          }
          if (value == list[key].name || value == list[key].id) {
            emit('changeValue', list[key])
            return
          }
          if (value == list[key].userId || value == list[key].userName) {
            // console.log(list[key])
            emit('changeValue', list[key])
            return
          }
          if (value == list[key].roleId || value == list[key].roleName) {
            // console.log(list[key])
            emit('changeValue', list[key])
            return
          }
        }
        if(value==""){
          emit('changeValue', '')
        }
      }
    }

    const getId = (item)=>{
      // let id = item.id?item.id:item.roleId?item.roleId:item.userId?item.userId:item.itemValue
      let id = item.id?item.id:item.userId?item.userId:item.roleId
      // console.log(id,11111)
      return id
    }

    const getLabel = (item)=>{
      let value = item.itemText?item.itemText:item.name?item.name:item.roleName?item.roleName:item.userName?item.userName:item.username?item.username:item.projectname?item.projectname:item.allName
      // console.log(value,22222)
      return value
    }

    return {
      advancedSelect,
      // selectValue,
      data,
      dataList,
      getId,
      getLabel
    }
  },
})
</script>

<style scoped lang="scss"></style>
